<template>
  <div>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <Yq-header v-if="isShowHeader"></Yq-header>
    <masker :style="maskStyle" :opacity="0.8" v-if="isMasker === true" fullscreen>
      <div slot="content" class="m-title" v-if="isMasker === true">
        <div style="width: 100%;">
          <icon type="cancel" style="display: inline-block;float: left;margin-left: 15px;" @click.native="cancelMask"></icon>
          <img src="../../../assets/images/user/jiantou.png" alt="邀请有奖" style=""><span>&nbsp;&nbsp;</span>
        </div>
        <p style="text-align: center;">请点击右上角分享</p>
        <p style="text-align: center;">邀请好友使用孝行通</p>
        <x-button type="primary" @click.native="cancelMask" action-type="button" style="width: 100px;margin-top: 30px;background: rgba(0,0,0,0);font-size: 15px;border: 1px solid white;">知道了</x-button>
      </div>
    </masker>
    <div class="flexBg">
      <flexbox>
        <flexbox-item><div class="flex-demo">
          <img src="../../../assets/images/user/pic_xxt_yqhy_top_01@2x.png" alt="邀请有奖" style="width: 100%;">
        </div></flexbox-item>
      </flexbox>
      <flexbox :gutter="0" style="margin: 0 auto 20px auto;">
        <flexbox-item :span="4.5"><div class="flex-demo">
          <img :src=avatar alt="用户头像" style="width: 60px;height: 60px;border-radius: 50%;">
        </div></flexbox-item>
        <flexbox-item><div class="flex-demo flex-userInfo">
          <p>{{nick}}</p>
          <p>已成功邀请<span style="display: inline-block;font-weight: bold">&nbsp;{{total}}人</span></br>累积获得奖励
            <span style="display: inline-block;font-weight: bold">&nbsp;{{totalBalance}}元&nbsp;&nbsp;{{totalPoint}}积分</span>
          </p>
        </div></flexbox-item>
      </flexbox>
      <flexbox>
        <x-button type="primary" @click.native="userInvitation" action-type="button" style="width: 50%;margin-bottom: 10px;background: #3d82e5;">立即邀请</x-button>
      </flexbox>
      <div align="center">
        <divider style="color: white !important;width: 88%;">您的合伙人</divider>
      </div>
      <flexbox>
        <flexbox-item>
          <group gutter="0" style="width: 88%;margin: 0 auto">
            <div class="flex-invitationList">
              <divider v-if="hasInvitation===true" style="font-size: 14px;margin-top: 10px;margin-bottom: -10px;">您还没有合伙人,赶快邀请好友吧~</divider>
              <div v-for="invitationList in invitationList" class="invitationBorder">
                <cell :title=invitationList.nick style="border-bottom: solid 1px #a7a7a7;height: 20px;padding: 10px 15px;">
                  <img slot="icon" width="30" style="display:block;margin-right:15px;border-radius: 50%;" :src=invitationList.avatar>
                  <p>{{invitationList.tel}}</p>
                </cell>
              </div>
            </div>
          </group>
        </flexbox-item>
      </flexbox>
      <divider style="color: #ffff17 !important;">分享客攻略</divider>
      <flexbox :gutter="0">
        <flexbox-item>
          <ul style="list-style: none;width: 96%;margin-left: 15px;font-size: 14px;color: white;">
            <li style="font-weight: bold">1、发展分享客</li>
            <li>分享微商城任一页面给好友（注：必须是平台新用户），好友点击分享链接即可加入您的分享客队伍</li>
            <li style="font-weight: bold">2、坐享分成</li>
            <li>您的分享客在平台每完成一笔消费，30%的现金奖励直接打入您的账户，还有更多积分奖励，与分享客共享</li>
          </ul>
        </flexbox-item>
      </flexbox>
      <divider style="color: #ffff17 !important;">分享客规则</divider>
      <flexbox :gutter="0">
        <flexbox-item>
          <ul style="list-style: none;width: 96%;margin-left: 15px;font-size: 14px;color: white;">
            <li style="font-weight: bold">如何推荐好友加入分享客？</li>
            <li>1、将孝心商城任一页面分享至朋友圈或发送给好友</li>
            <li>2、好友进入分享链接，长按扫描页面二维码，关注“掌上养老”微信公众号，即可成为您的分享客</li>
            <li style="font-weight: bold">如何获取奖励？</li>
            <li>您的分享客在孝心商城消费，您将获得分享客消费总利润30%的现金奖励（只计算至小数点后两位，后面部分舍去），将在交易确认收货后3个工作日内，直接打入您的余额账户，余额可用于平台消费</li>
          </ul>
        </flexbox-item>
      </flexbox>
      <flexbox style="padding-bottom: 30px;">
        <div style="width: 100%;text-align: center;">
          <a :href="qqLink"><img src="../../../assets/kefuButtion.png" width="90px"/></a>
        </div>
      </flexbox>
    </div>
  </div>
</template>

<script>
  import { Group, Cell, Flexbox, FlexboxItem, Divider, XButton, Alert, Masker, Icon } from 'vux'
  import * as urls from '../../../api/urls'
//  import * as types from '../../../store/types'
  import YqHeader from '../../../components/YqHeader.vue'
  import {API_ROOT} from '../../../config.js'
  import $ from 'jquery'

  export default {
    components: {
      Group,
      Cell,
      Flexbox,
      FlexboxItem,
      Divider,
      XButton,
      Alert,
      Masker,
      Icon,
      YqHeader
    },
    data () {
      return {
        hasInvitation: false,
        isShowHeader: false,
        isMasker: false,
        maskStyle: 'height: 300px;width:100%;position: absolute;',
        userId: '',
        userName: '王小明',
        qqLink: '',
        avatar: '',
        nick: '',
        total: '',
        totalBalance: '',
        totalPoint: '',
        alertShow: {
          showmsg: false,
          msg: ''
        },
        invitationList: []
      }
    },
    methods: {
      onClick (i) {
      },
      cancelMask () {
        this.isMasker = false
        document.getElementsByClassName('weui_tab_bd')[0].style.overflowY = 'auto'
        this.maskStyle = 'width:100%;position: absolute;z-index: 0;height: ' + (document.body.clientHeight) + 'px;'
      },
      userInvitation () {
        this.isMasker = true
        document.getElementsByClassName('weui_tab_bd')[0].style.overflowY = 'hidden'
        this.maskStyle = 'width:100%;position: absolute;z-index: 9999;height: ' + (document.body.clientHeight) + 'px;'
      },
      getList () {
        let userId = window.sessionStorage.getItem('userId')
        let that = this
        this.http(urls.myRecommend, {userId: userId}, function (res) {
          if (res.status === 100) {
            if (res.data !== null) {
              that.total = res.data.total
              that.totalBalance = res.data.totalBalance
              that.totalPoint = res.data.totalPoint
              if (res.data.customers.list.length !== 0) {
                that.invitationList = res.data.customers.list
                for (let i = 0; i < that.invitationList.length; i++) {
                  if (that.invitationList[i].tel === undefined) {
                    that.invitationList[i].tel = '手机号未绑定'
                  }
                }
              } else {
                that.hasInvitation = true
              }
              let customer = res.returnValue
              that.nick = customer.nick
              that.avatar = customer.avatar
//              for (let i = 0; i < 10; i++) { // 合伙人测试
//                that.invitationList.push(that.invitationList[0])
//              }
            }
            that.weixinfn4()
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      },
      getQueryString (name) {
//        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
//        var r = window.location.search.substr(1).match(reg)
//        if (r !== null) {
//          return (r[2])
//        } else {
//          return null
//        }
        let userId = window.location.href.substr('userId='.length + window.location.href.indexOf('?') + 1, window.location.href.length)
        return userId
      },
      weixinfn4 () {
        let that = this
        let userId = window.sessionStorage.getItem('userId')
        window.sessionStorage.setItem('avatar', that.avatar)
        that.avatar = window.sessionStorage.getItem('avatar')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t6&uid=' + userId
        that.$wechat.ready(function () {
          that.$wechat.onMenuShareAppMessage({
            title: '你的好友邀你加入孝行通', // 分享标题
            desc: '孝行通掌上养老，为老人想得更多，全方位居家养老服务，数百种中老年适用商品，让老人居家幸福，健康安心，助你工作轻松，家庭和谐。', // 分享描述
            link: link, // 分享链接
            imgUrl: that.avatar, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
          that.$wechat.onMenuShareTimeline({
            title: '你的好友邀你加入孝行通', // 分享标题
            link: link, // 分享链接
            imgUrl: that.avatar, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
        })
        $.ajax({
          url: API_ROOT + '/api/wxAuth/jsauth?url=' + encodeURIComponent(url + '/static/index.html'),
          type: 'post',
          success: function (t) {
            if (t.status === 100) {
              let sign = t.data.sign
              let weixinConfig4 = {
                debug: false,
                appId: sign.appId,
                timestamp: sign.timeStamp,
                nonceStr: sign.nonceStr,
                signature: sign.signature,
                jsApiList: ['onMenuShareAppMessage', 'chooseWXPay', 'onMenuShareTimeline']
              }
              // 授权
              that.$wechat.config(weixinConfig4)
              // 调用ready初始化
            } else {
              that.weixinfn4()
            }
          },
          error: function (t) {
            that.weixinfn4()
          }
        })
      }
    },
    mounted: function () {
      this.maskStyle = 'width:100%;position: absolute;z-index: 9999;height: ' + (document.body.clientHeight) + 'px;'
      document.getElementsByClassName('weui_tabbar')[0].style.display = 'none'
      document.getElementsByClassName('weui_tab_bd')[0].style.paddingBottom = '0'
      if (window.sessionStorage.getItem('userId') === '' || window.sessionStorage.getItem('userId') === null || window.sessionStorage.getItem('userId') === undefined) {
        this.userId = this.getQueryString('userId')
        if (this.userId !== '' && this.userId !== null && this.userId !== undefined) {
          window.sessionStorage.setItem('userId', this.userId)
          this.getList()
        } else {
          let url = window.location.origin
          window.location.href = url + '/api/wxAuth/index?type=t1'
        }
      } else {
        this.userId = window.sessionStorage.getItem('userId')
        this.getList()
      }

      let qq = window.sessionStorage.getItem('sysqq')
      this.qqLink = 'http://wpa.qq.com/msgrd?v=3&uin=' + qq + '&site=qq&menu=yes'
      this.nick = this.$store.state.userInfo.nick
      this.avatar = this.$store.state.userInfo.avatar
//      this.$wechat.showOptionMenu()
    }
  }
</script>

<style scoped="scoped">
  .flex-demo {
    text-align: center;
    border-radius: 4px;
    background-clip: padding-box;
  }
  .flex-userInfo >p{
    color: white;
    text-align: left;
    line-height: 28px;
    font-size: 14px;
  }
  .flex-invitationList{
    /*border: solid 1px grey;*/
    /*margin: 20px auto;*/
    /*padding-bottom: 30px;*/
    height: 205px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .flexBg{
    /*background: url("../../../assets/fenxiangyaoqing.png") no-repeat;*/
    background: url("../../../assets/images/user/yqhybj.png") no-repeat;
    background-size: 100% 100%;
    overflow-x: hidden;
  }
  .m-title {
    color: #fff;
    text-align: right;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
    font-weight: 500;
    font-size: 16px;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 148px;
    transform: translateY(-50%);
  }
  .weui_icon_cancel:before{
    color: white;
    font-size: 40px;
  }
  .vux-divider:after, .vux-divider:before{
    background-image: url("../../../../src/assets/images/user/baise.png") !important;
  }
</style>
